<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from "vue";
import { weiban } from '@/script/yiban'


let action = ref(0);
let logs = ref([]);
let index = 0;
let ISDataList = [];
let boxs = [];
let tableData = ref([]);
let status = ref(false)

onMounted(() => {
  saveLog({ type: 'info', content: '初始化加载完成~'})
  const status = localStorage.getItem('weiban_status')
  const href = location.href
  if(href.includes('#/login')) {
    saveLog({ type: 'warning', content: '请登录~'})
  }
  if(status === 'true') {
    saveLog({ type: 'warning', content: '继续执行中...'})
    weiban()
  }
})

const initiate = () => {
  saveLog({ type: 'success', content: '正在开始执行中...' })
  status.value = true
  localStorage.setItem('weiban_status', 'true')
  weiban()
}

const finish = () => {
  saveLog({ type: 'error', content: '已结束执行中...' })
  status.value = false
  localStorage.setItem('weiban_status', 'false')
  location.reload()
}

const examination = () => {
  ElMessageBox.alert('开发中...', '提示', {
    confirmButtonText: '好的',
  })
}

// 存储日志
const saveLog = (log) => {
  const islogs = JSON.parse(localStorage.getItem('weiban_logs')) || []
  islogs.push(log)
  logs.value = islogs
  localStorage.setItem('weiban_logs', JSON.stringify(islogs))
}

// 清除logs
const clearLogs = () => {
  localStorage.removeItem('weiban_logs')
  logs.value = []
}


// 请求数据
const requestData = (url, data = {}, method = "GET") => {
  return new Promise((resolve, reject) => {
    window
      .fetch(url, {
        method: method,
        headers: {
          "Content-Type": "application/json",
        },
        body: method == "GET" ? null : JSON.stringify(data),
      })
      .then((res) => resolve(res.json()))
      .catch((err) => reject(err));
  });
};
</script>

<template>
  <div class="home">
    <div class="btnBox">
      <!-- <el-button type="primary" :disabled="action !== 0" @click="startCrawl"
        >开始抓取</el-button
      >
      <el-button type="warning" :disabled="action !== 1" @click="stopCrawl"
        >结束抓取</el-button
      > -->
      <el-button type="success" @click="initiate" >开始</el-button>
      <el-button type="danger" @click="finish" >结束</el-button>
      <el-button type="info" @click="examination" >考试</el-button>
    </div>
    <div class="logview">
      <div v-for="(item, index) in logs" :key="index">
        .....
        <el-text :type="item.type">{{ item.content }}</el-text>
      </div>
    </div>
    <el-icon @click="clearLogs"><Delete /></el-icon>
  </div>
</template>
<style scoped>
.home {
  padding: 10px 20px;
}
.logview {
  padding: 10px;
  height: 160px;
  margin-top: 10px;
  background-color: black;
  color: #fff;
  border-radius: 5px;
  line-height: 1.3;
  overflow: auto;
}
.home {
  position: relative;
}
.home .el-icon {
  position: absolute;
  right: 25px;
  top: 60px;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
}
.home .el-icon:hover {
  color: red;
}
</style>
